<nz-card>
  <nz-skeleton [nzActive]="true" [nzLoading]="loading || updating">

    <div class="ant-upload-list ant-upload-list-picture-card mb-3">
      <div class="ant-upload ant-upload-select ant-upload-select-picture-card" style="position: relative">
        <div class="ant-upload" tabindex="0" role="button" (click)="fileInput.click()" nz-tooltip
          [nzTooltipTitle]="avatarUrl ? '点击更换头像' : '点击上传头像'"></div>
        <input type="file" accept="image/png, image/jpg, image/jpeg" style="display: none;"
          (change)="uploadFile(fileInput)" #fileInput>

        <div *ngIf="!avatarUrl || uploading" class="avatar-upload-icon">
          <span *ngIf="!uploading" nz-icon nzType="plus" nzTheme="outline"></span>
          <span *ngIf="uploading" nz-icon nzType="loading" nzTheme="outline"></span>
          <div style="margin-top: 8px;">{{uploading ? '上传中...' : '上传'}}</div>
        </div>

        <img *ngIf="avatarUrl" [alt]="profile?.name" [src]="avatarUrl" style="width: 100%" />
      </div>
    </div>

    <form (ngSubmit)="submit()" [formGroup]="form" nz-form nzLayout="vertical">
      <nz-form-item>
        <nz-form-label nzFor="name" nzRequired>姓名</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="姓名是必填项！">
          <input [formControlName]="'name'" id="name" nz-input />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzFor="email" nzRequired>电子邮件</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="输入的电子邮件无效！">
          <input [formControlName]="'email'" id="email" nz-input readonly />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item class="register-area mb-3" nz-row>
        <nz-form-control>
          <button [disabled]="isInvalidForm() || loading" [nzLoading]="updating" nz-button nzType="primary">
            保存更改
          </button>
        </nz-form-control>
      </nz-form-item>

      <p *ngIf="profile?.joined_date" class="mb-0" nz-typography nzType="secondary">
        <small nz-tooltip nzTooltipPlacement="right" nzTooltipTitle="{{profile?.joined_date | date: 'medium'}}">
          加入于 {{profile?.joined_date | fromNow}}
        </small>
      </p>
      <p *ngIf="profile?.last_updated" class="mb-0" nz-typography nzType="secondary">
        <small nz-tooltip nzTooltipPlacement="right" nzTooltipTitle="{{profile?.last_updated | date: 'medium'}}">
          最后更新于 {{profile?.last_updated | fromNow}}
        </small>
      </p>

    </form>
  </nz-skeleton>
</nz-card>